<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h3>文件上传</h3>
    <form id="uploadForm">
        <input type="file" id="image"><br>
        <button type="button" id="upload">上传</button>
    </form>
<hr>
    <h3>文件上传+缩略图</h3>
    <form id="uploadForm1">
        <input type="file" id="image1"><br>
        <button type="button" id="upload1">上传</button>
    </form>
    <div id="div" style="width: 500px"></div>
<hr>
</body>
<script>
    $(function () {
        $("#upload").click(function () {
            let formData = new FormData($("#uploadForm")[0]);
            formData.append("file",$("#image")[0].files[0]);
            $.ajax({
                url: '/upload/' ,
                type: 'post',
                data: formData,
                dataType: "json",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    if (data!=null && data !== ''){
                        $('#uploadForm')
                            .append('<img src="http://192.168.247.201/'+data.path+'" alt="img" width="500px">')
                    }
                }
            });
        });
        $("#upload1").click(function () {
            let formData = new FormData($("#uploadForm1")[0]);
            formData.append("file",$("#image1")[0].files[0]);
            $.ajax({
                url: '/upload/thumb' ,
                type: 'post',
                data: formData,
                dataType: "json",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    if (data!=null && data.length>0){
                        for (let i =0 ; i<data.length ; i++){
                            let path = 'http://192.168.xxx.xxx/' + data[i];
                            $('#div')
                                .append('<img id="img'+i+'" src="'+path+'" alt="img"><br>' +
                                    '<a href="/upload/downLoad?fileUrl='+path+'">下载</a><br>')
                        }
                    }
                }
            });
        });

        $(document).on("click",".download",function () {
            let flag = $(this).attr('flag');
            $.ajax({
                url:"/upload/downLoad",
                data:{'fileUrl':$('#img'+flag)[0].src},
                type:"POST",
                dataType:"json",
                success:function(data){
                    alert(data)
                }
            });
        });
    });

</script>
</html>
